import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity
} from 'react-native'

import { connect } from 'react-redux'
import HeaderDefault from '../../components/header/HeaderDefault'
import { theme_app, theme_text } from '../../utils/appTheme'
import { getNormalTourTaskList } from '../../netServer/patrol'
import Toast from 'react-native-simple-toast'
import { dateTransform } from '../../utils/utils_date'

class ConventionDetail extends Component {
  constructor(props) {
    super(props)
    this.state = { taskList: [] }
  }
  static navigationOptions = ({ navigation }) => ({
    header: (
      <HeaderDefault
        // rihghtBtnOnPress={() => {
        //   navigation.navigate('ConventionAdd', { title: '添加巡视' })
        // }}
        // rightRitle="添加"
        backBtnOnPress={navigation.goBack}
        title="常规巡视"
      />
    )
  })

  componentDidMount() {
    this._loadData()
  }

  _loadData = () => {
    let { patient_no } = this.props.navigation.state.params.pinfo

    let paramss = new FormData()
    paramss.append('patientNo', patient_no)

    getNormalTourTaskList(paramss, resp => {
      let { code, data = [], msg } = resp

      if (code == '0') {
        this.setState({
          taskList: data
        })
      } else {
        Toast.showWithGravity(msg, 0.3, Toast.CENTER)
      }
    })
  }

  _renderItem = item => {
    let {
      name,
      bed_no,
      sex,
      age,
      allergy,
      gradeName,
      inhosp_no,
      days,
      charge_type
    } = item
    return (
      <View
        style={{
          width: screenWidth,
          height: 100,
          borderBottomColor: '#efefef',
          borderBottomWidth: 1,

          backgroundColor: 'white'
        }}
      >
        <View
          style={{
            width: screenWidth,
            height: 40,
            paddingLeft: 16,
            paddingRight: 16,
            alignItems: 'center',
            flexDirection: 'row',
            justifyContent: 'space-between'
          }}
        >
          <Text style={{ fontSize: 16 }}>{name}</Text>
          <Text>{bed_no}</Text>
        </View>

        <View
          style={{
            width: screenWidth,
            height: 30,
            paddingLeft: 16,
            paddingRight: 16,
            alignItems: 'center',
            flexDirection: 'row',
            justifyContent: 'space-between'
          }}
        >
          <Text>
            {sex == 1 ? '男' : '女'}/{age}
          </Text>
          <Text>{inhosp_no}</Text>
          <Text>{days}</Text>
          <Text>{charge_type}</Text>
        </View>

        <View
          style={{
            width: screenWidth,
            height: 30,
            paddingLeft: 16,
            paddingRight: 16,
            alignItems: 'center',
            flexDirection: 'row'
          }}
        >
          <Text style={{ width: 80, color: 'green' }}>{gradeName}</Text>
          <Text style={{ color: 'red' }}>{allergy}</Text>
        </View>
      </View>
    )
  }

  _keyExtractor = (item, index) => 'asdftask_id' + index

  _separator = () => {
    return <View style={{ height: 1, backgroundColor: '#efefef' }} />
  }

  _renderFlatItem = ({ item }) => {
    let { task_date, in_bed, direction, condition, fridge } = item

    let dt_time = task_date ? new Date(task_date.replace(/-/g, '/')) : null

    return (
      <TouchableOpacity
        onPress={() => {
          let taskinfo = {
            ...item,
            ...this.props.navigation.state.params.pinfo
          }
          this.props.navigation.navigate('ConventionAdd', {
            title: '编辑巡视',
            commitSuccessCB: this._loadData,
            taskInfo: taskinfo
          })
        }}
      >
        <View
          style={{
            width: screenWidth,
            height: 60,
            flexDirection: 'row',
            borderBottomColor: '#efefef',
            borderBottomWidth: 1,
            backgroundColor: 'white'
          }}
        >
          <View style={styles.flattableCell}>
            <Text>{dt_time ? dateTransform(dt_time, 'hh:mm') : null}</Text>
          </View>
          <View style={styles.flattableCell}>
            <Text>{this._isInbed(in_bed, direction)}</Text>
          </View>
          <View style={styles.flattableCell}>
            <Text>{condition === 'null' ? '' : condition}</Text>
          </View>
          <View style={styles.flattableCell}>
            <Text>{fridge === 'null' ? '' : fridge}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }

  _isInbed = (isInbed, direction) => {
    if (isInbed == 1) {
      return '是'
    } else {
      if (direction && direction !== 'null') {
        return direction
      } else {
        return ''
      }
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {this._renderItem(this.props.navigation.state.params.pinfo)}
        <View style={{ width: screenWidth, height: 35, flexDirection: 'row' }}>
          <View style={styles.tableCell}>
            <Text>时间</Text>
          </View>
          <View style={styles.tableCell}>
            <Text>在床</Text>
          </View>
          <View style={styles.tableCell}>
            <Text>病情</Text>
          </View>
          <View style={styles.tableCell}>
            <Text>冰箱卫生</Text>
          </View>
        </View>

        <FlatList
          style={{ flex: 1 }}
          ItemSeparatorComponent={this._separator}
          data={this.state.taskList}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderFlatItem}
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme_app.bg_color
  },
  lineStyle: {
    width: screenWidth - 120,
    height: 40,
    flexDirection: 'row',
    alignItems: 'center'
  },
  flattableCell: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
    borderRightColor: '#efefef',
    borderRightWidth: 1
  },
  tableCell: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#bbb',
    borderRightColor: '#9b9b9b',
    borderRightWidth: 1
  }
})

function select(store) {
  return {}
}

export default connect(select)(ConventionDetail)
